<!-- 笔记-->
<template>
  <div class="note-box">
    <!-- 新建笔记 -->
    <div class="add-note-box">
      <div class="f16 note-title">新建笔记</div>
      <div class="add-note-edit">
        <note-item
          :id="-1"
          :info="newData"
          :mode.sync="newData.mode"
          @save="addOneNote"
          ref="addNote"
        ></note-item>
      </div>
    </div>
    <!-- 我的笔记 -->
    <div class="my-note-box">
      <div class="f16 note-title">我的笔记</div>
      <template v-if="Array.isArray(noteList) && noteList.length">
        <div
          class="note-item-wrap pr"
          v-for="(item, index) in noteList"
          :key="item.object_id"
        >
          <!-- 课节名称 -->
          <div class="course-section-name text-ess-1" :title="sectionName">
            {{ sectionName }}
          </div>
          <note-item
            :id="index"
            :info="item"
            :mode.sync="item.mode"
            :key="item.object_id"
            @save="editOneNote"
            @delete="deleteOneNote"
          ></note-item>
        </div>
      </template>
      <template v-else>
        <div class="no-data" v-if="!loading">
          <div class="flex-center flex-column-wrap">
            <img
              class="empty-img"
              src="//image.zlketang.com/public/news/images/new_official/play/empty.png"
              alt="空状态"
            />
            <div class="empty-text">你还没有开始做笔记哦</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { getNoteList, insertNote, removeNote } from '../../../api/play'
import noteItem from './noteItem.vue'
export default {
  data() {
    return {
      newData: {
        content: [],
        mode: 1
      },
      // 笔记数据加载中
      loading: true
    }
  },
  components: {
    'note-item': noteItem
  },
  computed: {
    // 获取笔记列表
    noteList() {
      return this.$store.state.play.noteList
    },
    // 权限集信息
    courseInfo() {
      return this.$store.state.play.courseInfo || {}
    },
    // 课节详情
    videoDetialInfo() {
      return this.$store.state.play.playingSection || {}
    },
    selectInfo() {
      return this.$store.state.play.selectInfo || {}
    },
    sectionName() {
      let sectionInfo = this.$store.state.play.playingSection || {}
      return sectionInfo.section_name || ''
    }
  },
  methods: {
    // 【1】组件初始化函数
    init() {
      this.fetchNoteListData()
    },

    // 【1】请求笔记列表
    fetchNoteListData() {
      let { course_id, course_section_id } = this.videoDetialInfo
      let params = {
        from: 'web',
        channel: 'web',
        devtype: 'web',
        platform_type: 'web',
        v_date: '1668589740627',
        t: Date.now(),
        course_id,
        section_id: course_section_id
      }
      getNoteList(params)
        .then(res => {
          let { errcode, data } = res
          if (+errcode !== 0) return
          let { user_note, count } = data
          if (Array.isArray(user_note)) {
            // 处理数据
            user_note.forEach(item => {
              let { note_content } = item
              let currentNote = []
              try {
                currentNote = JSON.parse(note_content)
                currentNote = Array.isArray(currentNote) ? currentNote : []
              } catch (e) {}
              currentNote = currentNote.map(item2 => {
                if (typeof item2 === 'string' && !item2) {
                  return ''
                }
                return {
                  type: Array.isArray(item2) ? 'image' : 'text',
                  key: this.generateRandomString(4),
                  content: item2
                }
              })
              currentNote = currentNote.filter(item3 => item3)
              // mode为2 调用note-item组件时，可以渲染出列表模式，具体mode可选值参考note-item组件。
              item.mode = 2
              item.content = currentNote
            })
            this.$store.dispatch('play/setNoteList', user_note)
            this.loading = false
            return
          }
          this.$store.dispatch('play/setNoteList', [])
          this.loading = false
        })
        .catch(e => {
          this.$store.dispatch('play/setNoteList', [])
          this.loading = false
        })
    },
    handleCancel() {},
    addOneNote(list, current) {
      let { course_id, course_section_id, teacher_id, year } = this.selectInfo
      let { profession_id, subject_id } = this.courseInfo
      let postData = {
        from: 'web',
        profession_id,
        course_id,
        section_id: course_section_id,
        subject_id,
        teacher_id,
        year
      }
      let noteArr = []
      Array.isArray(list) &&
        list.forEach(item => {
          noteArr.push(item.content)
        })
      if (current && typeof current === 'string' && current.trim()) {
        noteArr.push(current)
      }
      if (!noteArr.length) return this.$message.warning('笔记不能为空~')
      // 将最后一条加入briefly
      let lastNote = noteArr[noteArr.length - 1]
      // 组装摘要，取最后一条数据，若为字符串，则截取前200字；若为数组，则截取数组的前6张图作为摘要。
      let briefly = ''
      if (typeof lastNote === 'string') {
        briefly = lastNote.slice(0, 200)
      }
      if (Array.isArray(lastNote)) {
        briefly = lastNote.slice(0, 6)
      }
      postData.briefly = JSON.stringify([briefly])
      postData.note_content = JSON.stringify(noteArr)

      insertNote(postData)
        .then(res => {
          if (+res.errcode !== 0) return
          this.$refs.addNote.reset()
          this.fetchNoteListData()
        })
        .catch(e => {})
    },
    editOneNote(list, current, row) {
      let {
        object_id,
        profession_id = '',
        course_id,
        section_id,
        subject_id,
        teacher_id,
        year
      } = row
      let postData = {
        from: 'wxpub',
        object_id,
        profession_id,
        course_id,
        section_id,
        subject_id,
        teacher_id,
        year
      }
      let noteArr = []
      Array.isArray(list) &&
        list.forEach(item => {
          noteArr.push(item.content)
        })
      if (current && typeof current === 'string' && current.trim()) {
        noteArr.push(current)
      }
      if (!noteArr.length) return this.$message.warning('笔记不能为空~')
      // 将最后一条加入briefly
      let lastNote = noteArr[noteArr.length - 1]
      // 组装摘要，取最后一条数据，若为字符串，则截取前200字；若为数组，则截取数组的前6张图作为摘要。
      let briefly = ''
      if (typeof lastNote === 'string') {
        briefly = lastNote.slice(0, 200)
      }
      if (Array.isArray(lastNote)) {
        briefly = lastNote.slice(0, 6)
      }
      postData.briefly = JSON.stringify([briefly])
      postData.note_content = JSON.stringify(noteArr)

      insertNote(postData)
        .then(res => {
          if (+res.errcode !== 0) return
          this.fetchNoteListData()
        })
        .catch(e => {})
    },
    // 删除一条笔记
    deleteOneNote(object_id) {
      let params = {
        from: 'web',
        object_id
      }
      this.$confirm('是否删除当前笔记?', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        customClass: 'custom-confirm-box',
        closeOnClickModal: false
      })
        .then(() => {
          removeNote(params)
            .then(() => {
              this.fetchNoteListData()
            })
            .catch(e => {})
        })
        .catch(() => {})
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped>
.rel {
  /* css-ignore */
  position: relative;
}
.file-input-label {
  /* css-ignore */
  cursor: pointer;
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
}
.upload-file-input {
  /* css-ignore */
  width: 0;
  height: 0;
}
.pointer {
  /* css-ignore */
  cursor: pointer;
}
.note-title {
  /* css-ignore */
  height: 42px;
  line-height: 22px;
  padding: 10px 0;
}
.mr4 {
  /* css-ignore */
  margin-right: 4px;
}
.f16 {
  /* css-ignore */
  font-size: 16px;
}
.f18 {
  /* css-ignore */
  font-size: 18px;
}
.note-box {
  /* css-ignore */
  height: calc(100% - 94px);
  overflow-y: auto;
  color: #e6e6e6;
  background-color: #212121;
}
.add-note-box {
  /* css-ignore */
  padding: 0 20px 20px;
}

.add-note-edit {
  /* css-ignore */
  padding: 10px 16px 8px;
  background-color: #333;
  border-radius: 4px;
}
.static-textarea {
  /* css-ignore */
  height: 140px;
}
.dynamic-textarea {
  /* css-ignore */
  border: none;
  outline: 0;
  width: 100%;
  padding-top: 6px;
  background-color: transparent;
  color: #fff;
  font-size: 14px;
  font-family: 'Microsoft YaHei';
  resize: none;
}
.image-pos {
  /* css-ignore */
  width: 16px;
  height: 16px;
}
.save-row {
  /* css-ignore */
  height: 30px;
}
.save-btn {
  /* css-ignore */
  width: 60px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #8c8c8c;
  font-size: 12px;
  color: #8c8c8c;
  cursor: pointer;
}
.my-note-box {
  /* css-ignore */
  padding: 0 20px 32px;
}
.edit-item-img-wrap {
  /* css-ignore */
  width: calc(50% - 6px);
  margin-right: 12px;
  height: 60px;
  margin-bottom: 12px;
  cursor: pointer;
}
.edit-item-img-wrap:nth-child(2n) {
  /* css-ignore */
  margin-right: 0;
}
.edit-item-img {
  /* css-ignore */
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.edit-item-close {
  /* css-ignore */
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.note-item-wrap {
  /* css-ignore */
  width: 100%;
  margin-bottom: 20px;
  padding: 16px;
  background-color: #333;
  border-radius: 4px;
}
.course-section-name {
  /* css-ignore */
  height: 22px;
  line-height: 22px;
  margin-bottom: 10px;
  font-size: 16px;
  /* font-weight: bold; */
  color: #e6e6e6;
  width: 200px;
}
.no-data {
  /* css-ignore */
  margin-top: 104px;
  color: #b3b3b3;
}
.empty-img {
  /* css-ignore */
  display: block;
  width: 122px;
  height: 79px;
}
.empty-text {
  /* css-ignore */
  margin-top: 10px;
  text-align: center;
  width: 154px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-family: 'PingFangSC-Regular, PingFang SC';
  font-weight: 400;
  color: #8c8c8c;
}
.pr {
  /* css-ignore */
  position: relative;
}
</style>
